<template>
  <div class="select-city">
    <h2>疫情期间的出行政策</h2>
    <!-- 出发的城市 -->
    <van-field
      v-model="fieldValue"
      is-link
      readonly
      label="出发的城市"
      placeholder="请选择所在地区"
      @click="show = true"
    />
    <van-popup v-model="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>
    <!-- 到达的城市 -->
    <van-field
      v-model="fieldValue2"
      is-link
      readonly
      label="抵达的城市"
      placeholder="请选择所在地区"
      @click="show2 = true"
    />
    <van-popup v-model="show2" round position="bottom">
      <van-cascader
        v-model="cascaderValue2"
        title="请选择所在地区"
        :options="options"
        @close="show2 = false"
        @finish="onFinish2"
      />
    </van-popup>
    <div class="btn">
      <van-button block type="primary" @click="searth">点击查看</van-button>
    </div>

    <!-- 政策查询结果 -->
    <div class="content">
      <div>出发城市的信息:</div>
      {{ from_info }}
      <div>到达城市的信息:</div>
      {{ to_info }}
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import Secret from "../../api/Secret";
export default {
  name: "CovidVant",
  components: {},
  // 定义属性
  data() {
    return {
      show: false, //弹窗状态
      show2: false,
      fieldValue: "",
      fieldValue2: "",
      cascaderValue: "",
      cascaderValue2: "",
      from: "", //出发城市的ID
      to: "", //目的城市的ID
      from_info: "", //出发城市信息
      to_info: "", //目的城市信息
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: "浙江省",
          value: "330000",
          children: [{ text: "杭州市", value: "330100" }],
        },
        {
          text: "江苏省",
          value: "320000",
          children: [{ text: "南京市", value: "320100" }],
        },
      ],
    };
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ value, selectedOptions }) {
      // console.log(value, selectedOptions, tabIndex);
      this.from = value;
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
    onFinish2({ value, selectedOptions }) {
      this.to = value;
      this.show2 = false;
      this.fieldValue2 = selectedOptions.map((option) => option.text).join("/");
    },
    //查询城市的疫情政策
    searth() {
      console.log(this.from, this.to);
      // 请求接口
      this.$api
        .travelQuery({
          from: this.from,
          to: this.to,
        })
        .then((res) => {
          console.log("555", res.data);
          this.from_info = res.data.result.from_info;
          this.to_info = res.data.result.to_info;
        });
    },
  },
  mounted() {
    this.$api
      .travelCity({
        key: Secret.travelKey,
      })
      .then((res) => {
        console.log(res.data.result); //如果调用接口次数达到上线，则打印"今日次数已达上限"
        if (res.data.result) {
          //let arr =  [{text:'',value:'',children[{}]},{}]
          let arr = [];
          res.data.result.forEach((element) => {
            //province
            let temp = {};
            temp.text = element.province;
            temp.value = element.province_id;
            temp.children = [];
            element.citys.forEach((item) => {
              let obj = {};
              obj.text = item.city;
              obj.value = item.city_id;
              temp.children.push(obj);
            });
            arr.push(temp);
          });
          this.options = arr;
          console.log(arr);
        } else {
          console.log("今日次数已达上限");
        }
      });
  },
};
</script>

<style lang="less" scoped>
.select-city {
  border-top: 1px solid #eee;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  h2 {
    padding-left: 0.2rem;
    font-size: 0.4rem;
    padding-bottom: 0.1rem;
  }
}
</style>
